<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css"/>
		<script src="jquery-1.11.1.js"></script>
		<script src="jquery.mobile-1.4.5.js"></script>
		
	</head>
	<body>
		<div data-role="page" id="pageone">
			<!--定义面板，必须置于由头部，内容及底部组成的页面之前或之后-->
			<div data-role="panel" id="myPanel">
				<h2>商品分类</h2>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="flow">母婴</a>
				<div data-role="popup" id="myPopup">
					<h1>母婴</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="flip">服装</a>
				<div data-role="popup" id="myPopup">
					<h1>服装</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="pop">户外</a>
				<div data-role="popup" id="myPopup">
					<h1>户外</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="slide">食品</a>
				<div data-role="popup" id="myPopup">
					<h1>食品</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="slidefade">生鲜</a>
				<div data-role="popup" id="myPopup">
					<h1>生鲜</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="slideup">图书</a>
				<div data-role="popup" id="myPopup">
					<h1>图书</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="slidedown">日用品</a>
				<div data-role="popup" id="myPopup">
					<h1>日用品</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
				<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all" data-transition="turn">电脑</a>
				<div data-role="popup" id="myPopup">
					<h1>电脑</h1>
					<p>弹窗内容</p>
					<img src="images/cat.jpg">
				</div>
			</div>
			<!--页面开始-->
			<div data-role="header">
				<h1>购物首页</h1>
			</div>
			<div data-role="content">
				<div class="ui-grid-c">
					<div class="ui-block-a">
						<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">商品分类</a></div>
						<div class="ui-block-b">
						<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">个人中心</a></div>
						<div class="ui-block-c">
						<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">购物车</a></div>
						<div class="ui-block-d">
						<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">搜索</a></div>
				</div>
				<img src="images/shopping.jpg" width="100%">
			</div>
			<div data-role="footer" data-position="fixed">
				<h1>天天好心情</h1>
			</div>
		</div>
	</body>
</html>
